<template>
  <div>
    <div v-if="detail">
      <div class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">明细</span>
        </el-divider>
        <el-table :data="tableData" size="mini">
          <el-table-column prop="Name" label="名称" />
          <el-table-column prop="CreationTime" label="提交时间">
            <template slot-scope="{row}">
              <span>{{ row.CreationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="OrganizationUnitName" label="提交机构" />
          <el-table-column prop="PhoneNumber" label="联系电话" />
          <el-table-column prop="Amount" label="金额">
            <template slot-scope="{row}">
              <span>¥{{ (row.Amount / 100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    }),
    tableData() {
      const obj = {
        Name: this.detail.FeeRequestName,
        CreationTime: this.detail.FeeStudents[0].CreationTime,
        OrganizationUnitName: this.detail.OrganizationUnitName,
        PhoneNumber: this.detail.PhoneNumber || '- -',
        Amount: this.detail.Amount
      };
      const arr = [obj];
      return arr;
    }
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
</style>
